import React, { Component } from "react";
import { observable, action, observe, trace, computed } from "mobx";
import { observer } from "mobx-react"
import ReactDom from "react-dom";
import DevTools from 'mobx-react-devtools'

//类的todo
class Todo {
    id = Math.random();
    @observable text = "";
    @observable istrue = 0;

    constructor(text) {
        this.text = text;
    }
    @action.bound toggle() {
        console.log(this.istrue);
        this.istrue = !this.istrue
    }
}

//仓库的类
class Store {
    @observable todos = [];

    //选中变高亮
    @observable filter = "all";
    @action.bound changeFilter(filter) {
        this.filter = filter;
    }
    //添加一个
    @action.bound addTodo(text) {
        this.todos.push(new Todo(text))
    }
    // 删除一个
    @action.bound removeTodo(text) {
        this.todos.remove(text)
    }
    @computed get filterTodo() {
        return this.todos.filter(todo => {
            switch (this.filter) {
                case "completed":
                    return todo.istrue
                case "uncompleted":
                    return todo.istrue != 0
                default:
                    return true
            }
        })
    }
    // 统计数
    @computed get reminder() {
        return this.todos.reduce((count, todo) => {
            count = count + (todo.istrue === true ? 0 : 1);
            return count;
        }, 0)
    }
}
let store = new Store();


@observer
class TodoHead extends Component {
    state = {
        text: ""
    }
    handsubmit = (event) => {
        event.preventDefault;
        let text = this.state.text;
        this.props.store.addTodo(text);
    }
    handChange = (event) => {
        this.setState({
            text: event.target.value
        })
    }
    render() {
        trace()
        return <React.Fragment>
            <input value={this.state.value}
                onChange={this.handChange}
            />
            <button onClick={this.handsubmit}>添加+</button>
        </React.Fragment>
    }
}
@observer
class TodoLiItem extends Component {
    render() {
        let store = this.props.store;
        return <ul>
            {
                this.props.store.filterTodo.map((item, index) => {
                    return <li key={item.id}>
                        <TodoItem todo={item} />
                        <span onClick={() => { store.removeTodo(item) }}>  X</span>
                    </li>

                })
            }
        </ul>
    }
}

const TodoItem = observer(({ todo }) => (
    <React.Fragment>
        <input type="checkbox"
            onChange={todo.toggle}
        />
        <span className={todo.istrue == "1" ? "red" : ""} > {todo.istrue}{todo.text}</span>

    </React.Fragment>
))

const TodoFooter = observer(({ store }) => (
    <React.Fragment>
        <div>
            还剩几 {store.reminder} 个
                </div>
        <div>
            <button
                className={store.filter === "all" ? "red" : ""}
                onClick={() => store.changeFilter("all")}
            >全部</button>
            <button
                className={store.filter === "umcompleted" ? "red" : ""}
                onClick={() => store.changeFilter("umcompleted")}
            >未完成</button>
            <button
                className={store.filter === "completed" ? "red" : ""}
                onClick={() => store.changeFilter("completed")}
            >已完成</button>
        </div>
    </React.Fragment>
))

@observer
class TodoList extends Component {
    render() {
        trace();
        let store = this.props.store;
        return (
            <div style={{ paddingTop: 50 }}>
                <TodoHead store={store} />
                <TodoLiItem store={store} />
                <TodoFooter store={store} />
            </div>
        )
    }
}
ReactDom.render(<div>
    <DevTools />
    <TodoList store={store} />
</div>, document.querySelector("#app"))